<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./src/css/base.css">
  <link rel="stylesheet" href="./src/css/strategy.css">
</head>

<body>
  <div class="view">
    <!-- 头部下载 -->
    <div class="home_top clearfix">
      <div class="home_title">
        <img src="./src/images/bm.png" alt="">
        <div class="game_title">
          <h4>王者荣耀</h4>
          <p>王者相见,打成一片</p>
        </div>
      </div>
      <div class="home_down">
        <img src="./src/images/down.png
          " alt="">
      </div>
    </div>

    <!-- 搜索 -->
    <div class="wz_search">
      <form action="">
        <input type="image" src="./src/images/seach.png">
        <input type="text" placeholder="请输入要搜索的英雄">
      </form>
    </div>

    <!-- 轮播图 -->
    <div class="wz_carousel">
      <div class="carousel_item clearfix">
        <a href="javascript:;"> <img src="./src/mork_images/lb31.jpg" alt=""> <div class="des">KPL每日话题：QG能否再次零封eStar？</div> </a>
        <a href="javascript:;"> <img src="./src/mork_images/lb31.jpg" alt=""> <div class="des">KPL每日话题：QG能否再次零封eStar？</div> </a>
        <a href="javascript:;"> <img src="./src/mork_images/lb31.jpg" alt=""> <div class="des">KPL每日话题：QG能否再次零封eStar？</div> </a>
      </div>
    </div>

    <!-- 标题 -->
    <div class="strategy_title clearfix">
        <a class="current_li" href="javascript:;"><span class="vt_font">最新</span><span class="vt_img"></span></a>
        <a href="javascript:;"><span class="vt_font">新人</span><span class="vt_img"></span></a>
        <a href="javascript:;"><span class="vt_font">英雄</span><span class="vt_img"></span></a>
        <a href="javascript:;"><span class="vt_font">官方</span><span class="vt_img"></span></a>
        <a href="javascript:;"><span class="vt_font">同人</span><span class="vt_img"></span></a>
    </div>

    <!-- 精彩攻略 -->
    <div class="special">
      <div class="game_content">
        <ul></ul>
        <!-- 加载更多 -->
        <div class="more">
          <a href="javascript:;">点击加载更多</a>
        </div>
      </div>
    </div>
    <footer class="clearfix">
      <a href="index.html"></a>
      <a href="./video.html"></a>
      <a href="./strategy.html"></a>
      <a href="./match.html"></a>
    </footer>
  </div>
</body>
<script src="./lib/jquery.1.12.4.js"></script>
<script>
  $(function () {
    var urlObj={
      type:"精品",
      pageSize:6
    };

    loadList();
    eventList();
    // 加载数据
    function loadList() {
      $.get("http://139.199.192.48:9092/api/getraiders?type="+urlObj.type+"&pageIndex=1&pageSize="+urlObj.pageSize,
        function (result) {
          if (result.status == 0) {
            var datas = result.message;
            var htmlArr = [];
            for (var i = 0; i < datas.length; i++) {
              var element = datas[i];
              htmlArr.push('<li class="clearfix">');
              htmlArr.push('<a href="' + element.url + '" class="game_img"> <img src="' + element.img + '" alt=""> </a>');
              htmlArr.push('<a href="' + element.url + '" class="game_tips">');
              htmlArr.push('<div class="tips_title">');
              htmlArr.push('<div class="title1">' + element.title + '</div>');
              htmlArr.push('<div class="title2">' + element.summary + '</div>');
              htmlArr.push('</div>');
              htmlArr.push(' <div class="tips_time">');
              htmlArr.push('  <p>' + element.num + ' <span></span></p>');
              htmlArr.push(' <p>' + element.gdate + '</p>');
              htmlArr.push(' </div>');
              htmlArr.push(' </div>');
              htmlArr.push('  </a>');
              htmlArr.push('  </li>');
            }
            $(".game_content>ul").html(htmlArr.join(''));
          }
        });
    }

    function eventList(){
      $(".strategy_title>a").click(function () {
          $(this).addClass("current_li").siblings().removeClass("current_li");
          var  type=$(this).find(".vt_font").html();
          urlObj.type=type;
          loadList(urlObj);
        });

        $('.more>a').click(function(){
          urlObj.pageSize+=6;
          loadList(urlObj);
        });
    }
  });

</script>

</html>